<template>
  <div id="clinicDetail">
    <!-- 就诊时间选择 -->
    <div class='mc' v-show='isTime' @click.stop='toggle(0)'></div>
    <div class='datetime'>
      <div class='top'>
        <a @click.stop='toggle(0)'>取消</a>
        <a @click.stop='sureTime'>确定</a>
      </div>
      <mt-picker :slots="slotsTime" @change="onValuesChangeTime"></mt-picker>
    </div>
    <div class="marks" v-show="showMarks" @click.stop='showMarks=false'>
      <div class="allTime" @click.stop='showMarks=true' style="border-radius: 8px">
        <div @click.stop='showMarks=false' style="width:97%;
          height:0.4rem;
          position: absolute;">
          <i style="background: #000;
                width:0.15rem;
                height: 1px;
                position: absolute;
                transform: rotate(135deg);
                top: 0.1rem;
                right: 0.05rem;"></i>
          <i style="background: #000;
            transform: rotate(45deg);
            width:0.15rem;
            height: 1px;
            position: absolute;
            top: 0.1rem;
            right: 0.05rem;"></i>
        </div>
        <ul class="tip">
          <li>
            <i class="red"></i>已售</li>
          <li>
            <i class="dark"></i>禁选</li>
        </ul>
        <h3>
          <div style="color: #404040;font-size: 11px;">*种植外科手术建议提前12小时以上预约</div>
          <div style="color: #404040;font-size: 11px;">*诊室专场费{{obj.price0}}</div>
          <div style="color: #404040;font-size: 11px;">*基础设施服务费{{obj.price2}}</div>
        </h3>
        <ul class="ltip">
          <li v-for="(val,key,index) in timeobj" :key="index" style="width:19%" class="white" :class="val.status == 4?'red':val.status == 2?'':'dark'">
            <label style="height:30px;line-height: 30px;">
              <input type="checkbox" v-model="obj.select_timeArr1" :value="key" :disabled="val.status == 2 ?false:true"
                @click="changeRule($event,key)">
              <i style="bottom:-10px" v-if="key<10">0{{key}}:00</i>
              <i style="bottom:-10px" v-if="key>9">{{key}}:00</i>
            </label>
            <i style="font-size: 10px;
            color:#4a3528" v-if="val.price">￥{{val.price}}</i>
            <i v-if="val.price==''" class="price">免费</i>
          </li>
        </ul>
        <a @click.stop="isRight">

          <img src="../../../image/surechair.png" alt="">
        </a>
      </div>
    </div>

    <!--  椅子手术类型选择 -->
    <div class='mc' v-show='isdocType' @click.stop='isdocType=false'>
      <div class='duration' @click.stop='isdocType=true'>
        <div class='top'>
          <a @click.stop='isdocType=false'>取消</a>
          <a @click.stop='sureDocType'>确定</a>
        </div>
        <mt-picker :slots="slotsDocType" :valueKey="'numbering'?'numbering':''" @change="onValuesChangeDocType"></mt-picker>
      </div>
    </div>
    <header>
      <i @click="goBack()"></i>
      <div>诊室详情</div>
    </header>
    <div class='box' style="overflow-y: auto">
      <div class='img'>
        <img :src="clinicObj.buspic" alt="" height="100">
      </div>
      <div class='infobox'>
        <div class='info'>
          <div class="left">
            <h4>{{clinicObj.clinicname}}</h4>
            <p>
              {{clinicObj.address}}
            </p>
            <div>
              <!-- <b @click='goAllComment' v-if="user == 'doctor'" style="text-align:left">{{commentNum}}人评价</b> -->
            </div>
          </div>
          <div class="right">
            <a class='tel' :href="'tel:'+''+clinicObj.tel+''">
              <img src="../../../image/icon_phone@2x.png" width='31' alt="">
            </a>
          </div>

        </div>
      </div>
      <ul v-if="user == 'doctor'||user == 'order'">
        <li>
          <span>
            <i style="color:red">*</i>就诊日期:</span>
          <input type="text" placeholder="请填写出诊日期" @click='toggle(1)' onfocus="this.blur();" v-model='obj.startdate'>
        </li>
        <li>
          <span>
            <i style="color:red">*</i>诊室选择:</span>
          <input type="text" placeholder="请选择手术诊室" @click='showPicker(0)' onfocus="this.blur();" v-model='currentChair.numbering'>
        </li>
        <li>
          <span>
            <i style="color:red">*</i>就诊时段:</span>
          <i v-if="timeobjlen" class="flex" @click='showMarksFun(1)'>{{ obj.select_timeArr | toStr}}</i>
          <input v-if="!timeobjlen" type="text" @click='showMarksFun(1)' onfocus="this.blur();" placeholder="请选择就诊时段">
        </li>
        <li>
          <span>诊室使用总价格:</span>
          <input type="number" v-model="obj.price1" disabled>
        </li>
        <li>
          <span>
            <i style="color:red">*</i>手术类型:</span>
          <input type="text" placeholder="请选择手术类型" @click='showPicker(1)' onfocus="this.blur();" v-model='obj.docType'>
        </li>
        <!-- <li>
          <span>诊室音乐:</span>
          <input type="text" v-model="obj.price" disabled>
        </li> -->
        <!-- <li>
          <span>
            <i style="color:red">*</i>姓名:</span>
          <input type="text" placeholder="请填写真实姓名" v-model='obj.name' @focus='$utils.focus($event)'>
        </li>
        <li>
          <span>
            <i style="color:red">*</i>手机号:</span>
          <input type="text" placeholder="请填写手机号" v-model='obj.phone' @focus='$utils.focus($event)'>
        </li>
        <li>
          <span>
            <i style="color:red">*</i>验证码:</span>
          <input type="text" placeholder="请输入验证码" v-model='obj.number' @focus='$utils.focus($event)'>
          <i class="blue" @click='getCode()' v-show='!hasCode'>获取验证码</i>
          <i class="blue" v-show='hasCode'>重新获取{{count}}s</i>
        </li> -->
      </ul>
      <div class='sure' v-if="user == 'doctor'||user == 'order'">
        <a @click='sureFun'>确 定</a>
      </div>

      <div class='img' v-if="user == 'patient'">
        <h3>诊室环境</h3>
        <div class="swiper-container" id="swiper2">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in envirPic" :key='index'>
              <img :src="item" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        way1: 0,
        verify: '', //手机验证码
        pid: '',
        showMarks: false,
        distance: '', //用户距离诊室距离
        commentNum: '', //诊室评价数目
        pickerstatus: '', //
        id: '', //诊室id
        blid: '', //患者id
        user: '', //判读入口
        clinicObj: {},
        chairlist: [],
        timeobj: {}, //0-23小时状态
        currentChair: '',
        envirPic: [], //环境图片
        isTime: false, //是否显示时间选择器
        valuestime: '', //就诊时间选择但未确定时的选项
        timeLength: '',
        obj: {
          startdate: '', //就诊时间时间选择器
          chairid: '', //椅子id
          chairname: '',
          select_timeArr: [], //医生选择的
          select_timeArr1: [], //医生选择的时间段
          docType: '', //手术类型
          way: '', //合作方式
          way1: '', //合作方式
          name: '', //姓名
          phone: '', //手机号
          number: '', //验证码
          price: '', //
          price1: '0', //就诊时段的总价格
          price0: '0', //就诊时段的价格
          price2: '0', //基础设施

        },
        infoObj: {},

        slotsTime: [{
          flex: 1,
          values: function () {
            const date1 = new Date(); //获取当前时间
            const dayArr = []; //定义一个数组存储所以时间
            for (var i = 0; i < 14; i++) {
              const date2 = new Date(date1);
              date2.setDate(date1.getDate() + i);
              const month = date2.getMonth() + 1;
              const day = date2.getDate();
              var month1, day1;
              if (month < 10) {
                month1 = '0' + month
              } else {
                month1 = month
              }
              if (day < 10) {
                day1 = '0' + day
              } else {
                day1 = day
              }
              const times = date2.getFullYear() + "-" + month1 + "-" + day1;

              dayArr.push(times); //把未来几天的时间放到数组里
            }
            return dayArr;
          }(),
          className: 'slot1',
          textAlign: 'center'
        }],

        istip: false, //是否显示就诊时间说明
        isdocType: false, //是否显示就诊类型选择
        valuesDocType: '', //手术类型选择但未确定是的选项
        slotsDocType: [{
          values: ['拔牙', '洗牙', '美牙'],
          className: 'slot1',
          textAlign: 'center'
        }, ],
        hasCode: false, //是否有验证码 默认无 发送后一分钟内是true 然后false
        time_count: 60, //倒计时时间
        count: '', //60s倒计时
        timer: null, //计时器
      }
    },
    computed: {
      timeobjlen: function () {
        const arr = {};
        for (var key in this.timeobj) {
          if (this.timeobj[key].status != 0) {
            arr[key] = this.timeobj[key];
          }
        }
        const len = this.$utils.getJsonLength(arr);
        return len;
      },
    },
    filters: {
      // 把数字转换成字符串
      toStr(arr) {
        const str = arr.join();
        return str;
      },
      toInt(distance) {
        const str = parseInt(distance);
        return str;
      },
    },
    methods: {
      changeRule(e, key) { //0指同意或者不同意 1指点的是收费协议
        var key = key - 8;
        if (e.target.checked) {
          $('.white').eq(key).addClass('green')
        } else {
          $('.white').eq(key).removeClass('green')
        }
        this.timeLength = $('.ltip').find('.green').length
        var j = 0; //有没有买过
        for (var i = 8; i < 24; i++) {
          if (localStorage.getItem('loginMobile') == this.timeobj[i].user) {
            j += 1
          }
        }
        //所选时间
        if (this.timeLength > 0) {
          this.obj.price2 = 50;
          //所用价钱
          if (j < 2) {
            if (j == 0) {
              if (this.timeLength <= 2) {
                this.obj.price0 = 0
              } else {
                this.obj.price0 = 100 * Math.pow(2, this.timeLength - 3)
              }
            } else {
              if (this.timeLength <= 1) {
                this.obj.price0 = 0
              } else {
                this.obj.price0 = 100 * Math.pow(2, this.timeLength - 2)
              }
            }
          } else {
            this.obj.price0 = 100 * Math.pow(2, this.timeLength - 1)
          }
          this.showMarks = false;
        } else {
          this.obj.price2 = 0;
        }

      },
      // 获取24个时间段及状态
      gettimeobj() { //如果该椅子没有数据  新建0-23小时
        this.timeobj = {};
        for (var i = 8; i < 24; i++) {
          const obj = {
            status: 0,
          }
          this.timeobj[i] = obj;
        }
      },
      // 获取共享信息列表
      getList() {
        this.$api.get(this.$api.baseURLSchool, "selectdata2/chairs_time?chairid=" + this.obj.chairid + "&startdate=" +
          this.obj.startdate, {}, r => {
            if (r.data.ret == 1) {
              if (r.data.info.length == 0) { //新建
                this.gettimeobj();
              } else {

                this.timeobj = JSON.parse(r.data.info[0].timeobj);
              }
            }
          }, err => {
            console.log(err);
          })
      },

      // 获取椅子列表
      getChairList() {
        this.$api.get(this.$api.baseURLSchool, "selectdata2/chairs?clinicid=" + this.id, {}, r => {
          if (r.data.ret == 1) {
            this.chairlist = r.data.info;
          }
        }, err => {
          console.log(err);
        })
      },
      //获取手术类型
      getsurgeryType() {
        this.$api.get(this.$api.baseURLSchool, "no_page/profession/?type=手术", {}, r => {
          if (r.data.ret == 1) {
            var arr = [];
            for (var i = 0; i < r.data.info.length; i++) {
              arr.push(r.data.info[i].name);
            }
            this.surgeryType = arr;

          }
        }, err => {
          console.log(err);
        })
      },

      // 显示椅子 手术类型选择器
      showPicker(str) { //0指选椅子 1指选手术类型 2指合作方式
        this.pickerstatus = str;
        this.isdocType = true;
        if (str == 0) {
          if (this.chairlist.length == 0) {
            this.isdocType = false;
            this.$utils._toast('诊室正在开放中。。。')
            return;
          }
          this.slotsDocType = [{
            values: this.chairlist,
            className: 'slot1',
            textAlign: 'center'
          }, ]
        } else if (str == 1) {
          if (this.surgeryType.length == 0) {
            this.isdocType = false;
            this.$utils._toast('咱无手术类型。。。')
            return;
          }
          this.slotsDocType = [{
            values: this.surgeryType,
            className: 'slot1',
            textAlign: 'center'
          }, ]
        }

      },

      // 判断用户选择时间段是否合格
      isRight() {
        const len = this.$utils.getJsonLength(this.obj.select_timeArr1);
        var j = 0; //有没有买过
        for (var i = 8; i < 24; i++) {
          if (localStorage.getItem('loginMobile') == this.timeobj[i].user) {
            j += 1
          }
        }
        //所选时间
        if (len > 0) {
          if (len > 8) {
            this.$utils._toast('大咖，注意劳逸结合，每天最多只能选择8小时')
            return;
          }
          var seltime = [];
          var a = JSON.parse(JSON.stringify(this.obj.select_timeArr1));
          for (var i = 0; i < a.length; i++) {
            if (a[i] < 10) {
              seltime.push('0' + a[i])
            } else {
              seltime.push(a[i])
            }
          }
          seltime = seltime.sort();
          for (var i = 0; i < seltime.length; i++) {
            if (seltime[i + 1] == undefined) {} else {
              if (Number(seltime[i + 1]) - Number(seltime[i]) == 1) {

              } else {
                this.$utils._toast('只能选择连续时间');
                return;
              }
            }
          }
          var Allprice = 0;
          for (var i = 8; i < 24; i++) {
            Allprice += Number(this.timeobj[i].price)
          }
          this.obj.price1 = this.obj.price0 + this.obj.price2 + Allprice;
          this.obj.select_timeArr = this.obj.select_timeArr1
          this.showMarks = false;
        } else {
          this.$utils._toast('请选择时间,至少1小时');
        }
      },


      //返回上一级
      goBack() {
        this.$router.push({
          name: 'selectClinic',
          query: {
            user: this.$route.query.user,
          }
        });
      },
      //显示选择时间段
      showMarksFun(status) {
        if (status) {
          if (!this.obj.startdate) {
            this.$utils._toast("请选择就诊日期");
          } else if (!this.obj.chairid) {
            this.$utils._toast("请选择诊室");
          } else {
            this.showMarks = true;
            this.getList();
          }
        }
      },
       // 登录拦截
       isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push('/login1')
          return false;
        } else {
          return true;
        }
      },
      // 判读入口
      init() {
        if (this.$route.query.user) {
          this.user = this.$route.query.user;
        } else {
          this.user = "doctor";
        }
        this.id = this.$route.query.id;
        this.distance = this.$route.query.distance;
        //根据诊室id获取详细信息
        this.$api.get(this.$api.baseURLSchool, "select_cid/clinic/" + this.id, {}, r => {
            if (r.data.ret == -3) {
                    localStorage.clear();
                  this.isLogin()
                }
          if (r.data.ret == 1) {
            this.id = r.data.info.id;
            this.status = 'details';
            this.clinicObj = r.data.info;
            this.obj.price = r.data.info.price
            this.envirPic = JSON.parse(this.clinicObj.envirPic);
            var mySwiper = new Swiper('.swiper-container', {
              autoplayDisableOnInteraction: false,
              loop: false,
              pagination: '.swiper-pagination',
              initialSlide: 0,
              observer: true,
              observeParents: true,
            });

          } else {
            this.status = 'add';
          }
        }, err => {
          console.log(err);
        })
      },
      // 控制日期选择器显示隐藏动画
      toggle(status) { //status 0隐藏 1显示
        if (status) {
          this.isTime = true;
          $(".datetime").addClass("up").removeClass("down");
        } else {
          $(".datetime").addClass("down").removeClass("up");
          this.isTime = false;
          setTimeout(function () {
            $(".datetime").removeClass("down");
          }, 700);
        }
      },
      //就诊时间
      onValuesChangeTime(picker, values) {
        this.valuestime = values.join(" ");
      },
      //确定就诊时间
      sureTime() {
        this.obj.startdate = this.valuestime;
        this.toggle(0);
      },
      //去往所有评价页面
      goAllComment() {
        this.$router.push({
          name: 'clinicAllComment',
          query: {
            clinicid: this.id
          }
        });
      },
      // 手术类型选择
      onValuesChangeDocType(picker, values) {
        this.valuesDocType = values[0];
      },
      sureDocType() {
        if (this.pickerstatus == 0) {
          this.currentChair = this.valuesDocType;
          this.obj.chairid = this.valuesDocType.id;
        } else if (this.pickerstatus == 2) {
          this.obj.way1 = this.valuesDocType;
        } else {
          this.obj.docType = this.valuesDocType;
        }
        this.isdocType = false;
      },
      //去认证会员
      //   goAuth() {
      //     this.$router.push({
      //       name: 'doctorvipAuth1'
      //     });
      //   },
      //填完信息确定去选择工具
      sureFun() {
        this.obj.chairname = this.currentChair.numbering;
        this.obj.clinicid = this.id;
        const len = this.$utils.getJsonLength(this.obj.select_timeArr);
        if (!this.obj.startdate) {
          this.$utils._toast('请选择就诊日期');
        } else if (!this.obj.chairid) {
          this.$utils._toast('请选择诊室');
        } else if (!len) {
          this.$utils._toast('请选择就诊时段');
        } else if (!this.obj.docType) {
          this.$utils._toast('请选择手术类型');
        } else {
          const docinfo = JSON.stringify(this.obj);
          const infoObj = JSON.stringify(this.infoObj);
          this.$router.push({
            name: 'toolsSelect',
            query: {
              docinfo: docinfo,
              infoObj: infoObj,
              clinicid: this.id,
            }
          });
        }
      },
      // 获取评价列表
      getCommentList() {
        this.$api.get(this.$api.baseURLSchool, "selectdata2/view_doctor_comment_user?clinicid=" + this.id, {}, r => {
          if (r.data.ret == 1) {
            this.commentNum = r.data.info.length;
          }

        }, err => {
          console.log(err);
        })
      },

    },
    created() {
      this.init();
      //   this.getCommentList();
      this.getChairList();
      this.getsurgeryType();
      this.gettimeobj();
    }
  }

</script>
<style lang="scss" scoped>
  .time {}

  .time {
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .time li {
    height: 30px;
    line-height: 30px;

  }

  .price {
    font-size: 10px;
    color: #4a3528
  }

  .red {
    background: #553a2c;

    i {
      color: #fff;
    }

    .price {
      color: #fddc34
    }

  }

  .dark {
    background: rgba(0, 0, 0, 0.2);

    i {
      color: rgba(0, 0, 0, 0.3);
    }

  }

  .green {
    border: 1px solid #553a2c;
  }

  .swiper-slide {
    width: 100%;
    height: 1.47rem;
  }

  .swiper-slide img {
    margin: 0rem 0.25rem;
    width: 3.23rem !important;
    border: 2px solid #a1edb3;
  }

  #swiper2 {
    /* padding-top: 0.3rem; */
  }

  .swiper-pagination {
    margin-left: 0.25rem;
  }

  .swiper-container {
    height: 2.05rem;
  }

</style>
